<template>
	<view v-if="uCharsState">
		<view :class="heightState? 'charts-box charts-box-active' : 'charts-box'">
			<Uchars
			:calss="heightState? 'canvas canvas-active' : 'canvas'"
			type="tline"
			:opts="opts"
			:chartData="chartData"
			:ontouch="true"
			 tooltipFormat="tooltipDemo1"
			>
			</Uchars>
		 </view>
		 <view class="proportion country">
		 	根据2005年中国九市儿童体格发育调查数据研究制定，参考文献：中华儿科杂志，2009年3期
		 </view>
		 <view class="proportion">
		 	{{infoChars.field_name}}({{infoChars.y_unit_name}}/{{infoChars.x_unit_name}})
		 </view>
		 <view class="help" @click="helpChilk(infoChars.article_cate_id)">
		 	帮助指南
		 </view>
	</view>
</template>

<script>
	import Uchars from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			Uchars
		},
		data() {
			return {
				heightState:false,
				uCharsState:false,
				infoChars:{},
				chartData: {
					series: []
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
				rotate:true,
				// rotateLock:true,	
				padding: [15,30,0,0],
				enableScroll:false,
				dataLabel: false,
				canvas2d:false,
				enableMarkLine: true,
				legend:{
					show:false,
					position:"top"
				},
				xAxis: {
				  scrollShow:false,
				  calibration:false,
				  gridType:'dash',
				  disableGrid: false,
				  itemCount: 5,
				  splitNumber:12,
				  titlePop:'',
				  labelCount:10,
				},
				extra: {
				  markLine:{
					  type: "solid",
					  dashLength: 2,
					  data:[]
				  },
				  tooltip: {
					  legendShow:false
				  },
				  line: {
					type: "straight",
					width: 1,
					activeType: "solid"
				  }
				},
				yAxis: {
					showTitle:true,
				    gridType: "dash",
					dashLength: 2,
					splitNumber:10,
					data: [
					  {
						tofix:1,
						title:'',
						min: '',
						max: '',
					  }
					]
				 }
				},
			}
		},
		onLoad:function(parms){
			let opt = JSON.parse(parms.opts)
			let series = JSON.parse(parms.series)
			this.infoChars = JSON.parse(parms.info)
			this.chartData.series = series
			this.opts.yAxis.data[0].min = opt.yAxis.data[0].min
			this.opts.yAxis.data[0].max = opt.yAxis.data[0].max
			this.opts.xAxis.titlePop =  opt.xAxis.titlePop
			this.opts.xAxis.splitNumber = opt.xAxis.limit_x
			this.opts.extra.markLine.data = opt.extra.markLine.data
			if(opt.xAxis.limit_x > 16){
				this.heightState = true
			}else{
				this.heightState = false
			}
			this.uCharsState = true
		},
		methods: {
			/* 跳转帮助指南 */
			helpChilk:function(id){
				uni.navigateTo({url:'/pages/extension/news_list/index?id=' + id})
			},
		}
	}
</script>

<style lang="scss">
.help{
	text-align: center;
	color: #3A62F1;
	padding: 12rpx 0 88rpx 0;
	background: #FFFFFF;
}
.proportion{
	padding: 0 18rpx 0 18rpx;
	text-align: center;
	width: 100%;
	background: #FFFFFF;
}
.country{
	padding: 0 36rpx 12rpx 36rpx;
	color: #FF8FB9;
}	
.canvas{
	height: 700px;
}
.canvas-active{
	height: 1200px !important;
}
.charts-box-active{
	height: 1200px !important;
}
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
   padding: 0 0 32rpx 0;
   background: #FFFFFF;	
   width: 100%;
   height: 700px;
}
</style>
